<template>
  <div class="bar">
    <div class="bar-left">
      <el-icon :size="20" class="collapse" @click="collapseChange">
        <Fold  v-if="!collapse"/>
        <Expand v-else/>
      </el-icon>
      <el-breadcrumb separator-icon="ArrowRight">
        <el-breadcrumb-item v-for="(o, index) in $route.matched.slice(1)" :key="index">
          <el-icon :size="15" style="vertical-align: top; margin-right: 3px">
            <component :is="o.meta.icon"></component>
          </el-icon>
          <span>{{o.meta.title}}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="bar-right">
      <el-button icon="Refresh" circle @click="refresh"/>
      <el-button icon="FullScreen" circle @click="fullScreen"/>
      <el-button icon="Setting" circle />
      <el-avatar style="margin: 0 12px" :size="32" :src="userStore.avatar"/>
      <el-dropdown @command="handleCommand" style="margin-right: 12px">
        <span class="el-dropdown-link">
          {{userStore.username}}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="exit">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, defineEmits, reactive} from "vue";
const $emit = defineEmits(['collapseChange'])

let collapse = ref(false)
const collapseChange = () => {
  collapse.value = !collapse.value
  $emit('collapseChange', collapse.value)
}
// 路由
import {useRoute, useRouter} from "vue-router";
let $route = useRoute()
let $router = useRouter()

// 刷新按钮点击事件
import useSettingStore from "@/store/modules/setting";
let settingStore = useSettingStore();
const refresh = () => {
  settingStore.refresh = !settingStore.refresh
}
// 全屏按钮点击事件
const fullScreen = () => {
  let full = document.fullscreenElement;
  if (!full) {
    document.documentElement.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}
// 获取用户信息
import useUserStore from "@/store/modules/user";
let userStore = useUserStore()

// 退出登录
const handleCommand = async (command: string) => {
  await userStore.logout()
  $router.push('/login')
}
</script>
<script lang="ts">
export default {
  name: 'tabbar'
}
</script>

<style scoped lang="scss">
.bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;

  .bar-left{
    display: flex;
    align-items: center;

    .collapse{
      margin-left: 20px;
      margin-right: 20px;
      cursor: pointer;
    }
  }

  .bar-right{
    height: 100%;
    display: flex;
    align-items: center;
  }
}
</style>
